<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>
		<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript">
			function plusReady() {
				// 用户侧滑返回时关闭显示的图片
				plus.webview.currentWebview().addEventListener("popGesture", function(e) {
					if (e.type == "start") {
						closeImg();
					}
				}, false);
			}
			document.addEventListener('plusready', plusReady, false);

			function getImage() {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(path) {
					plus.gallery.save(path);
					outSet("照片已成功保存到系统相册");
				}, function(e) {
					outSet("取消拍照");
				}, {
					filename: "_doc/gallery/",
					index: 1
				});
				
			}

			function galleryImg() {
				// 从相册中选择图片
				outSet("从相册中选择图片:");
				plus.gallery.pick(function(path) {
					outLine(path);
					showImg( path );
					createItem(path);
				    $(".ImgText").text("sdfsdfdsf");
				}, function(e) {
					outSet("取消选择图片");
				}, {
					filter: "image"
				});
			}

			function galleryImgs() {
				// 从相册中选择图片
				outSet("从相册中选择多张图片:");
				plus.gallery.pick(function(e) {
					for (var i in e.files) {
						outLine(e.files[i]);
					}
				}, function(e) {
					outSet("取消选择图片");
				}, {
					filter: "image",
					multiple: true
				});
			}

			function showImg(url) {
				// 兼容以“file:”开头的情况
				if (0 != url.indexOf("file://")) {
					url = "file://" + url;
				}
				var _body_ = document.body;
				var _div_ = document.createElement("div");
				_div_.style.top = "0px";
				_div_.style.left = "0px";
				_div_.style.height = "100%";
				_div_.style.width = "100%";
				_div_.style.zIndex = "99999";
				_div_.style.position = "fixed";
				_div_.style.background = "#ffffff";
				_div_.id = "imgShow";
				_div_.onclick = closeImg;
				var _img_ = document.createElement("img");
				_img_.src = url;
				_img_.style.width = "100%";
				_body_.appendChild(_div_);
				_div_.appendChild(_img_);
			}

			function closeImg() {
				var trnode = document.getElementById("imgShow");
				trnode && trnode.parentNode.removeChild(trnode);
			}
			var list = null,
				first = null;
			document.addEventListener("DOMContentLoaded", function() {
				list = document.getElementById("list");
				first = document.getElementById("empty");
			}, false);
			 // 添加列表项
			function createItem(path) {
					var li = document.createElement("li");
					li.className = "ditem";
					li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
					li.setAttribute("onclick", "displayMedia(this);");
					list.insertBefore(li, first.nextSibling);
					var i = path.lastIndexOf("/");
					if (i < 0) {
						i = path.lastIndexOf("\\");
					}
					li.querySelector(".aname").innerText = path.substr(i + 1);
					li.querySelector(".ainf").innerText = path;
					li.path = path;
					// 设置空项不可见
					first.style.display = "none";
				}
				// 清除列表记录

			function cleanList() {
					list.innerHTML = '<li id="empty" class="ditem-empty">无记录</li>';
					empty = document.getElementById("empty");
					// 删除音频文件
					outSet("清空选择照片记录：");
				}
				// 返回后关闭图片显示
			var _back = window.back;
			window.back = function() {
				closeImg();
				_back();
			};
		</script>
		<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			.aname {
				font-size: 16px;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
			.ainf {
				font-size: 12px;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
			.iplay {
				display: block;
				background: no-repeat right center url();
				background-size: 50px 44px;
				-ms-touch-action: auto;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="nvbt iback" onclick="back(true);"></div>
			<div class="nvtt">Gallery</div>
			<div class="nvbt idoc" onclick="openDoc('Gallery Document','/doc/gallery.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<br/>
			<div class="button" onclick="getImage()">拍照并保存到相册</div>
			<div class="button" onclick="galleryImg()">从相册中选择图片(单选)</div>
			<div class="button" onclick="galleryImgs()">从相册中选择图片(多选)</div>
			<br/>
			<div class="ImgText">dfgdfgfdg</div>
			<!-- Image list -->
			<!--<ul id="list" class="dlist" style="text-align:left;">
				<li id="empty" class="ditem-empty">无记录</li>
				<li class="ditem" onclick="displayMedia(this);">
					<span class="iplay">
						<div class="aname">.BjMobileService_bmcc168.apk.png</div><br>
						<div class="ainf">file:///storage/sdcard0/QQBrowser/安装包/.BjMobileService_bmcc168.apk.png</div>
					</span>
				</li>
			</ul>
			<br/>
			<div class="button button-waring" onclick="cleanList()">清空列表</div>
			<br/>-->
		</div>
		<div id="output">
			Gallery模块管理系统相册，如从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。
		</div>
	</body>

</html>